<template>

    <div class="user-details_box">

        <div class="borderbottom">
            <h3 class="order-details_h3">用户信息</h3>
            <el-row class="order-details_content">
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">用户ID：{{userDetailData.id}}</el-col>
                    <el-col :span="12">注册时间：{{userDetailData.created_at}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">用户类型：商户</el-col>
                    <el-col :span="12">来源：{{userDetailData.user_source}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">用户名称：{{userDetailData.name}}</el-col>
                    <el-col :span="12">邀请人：{{userDetailData.invite}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">联系人：{{userDetailData.name}}</el-col>
                    <el-col :span="12">渠道：{{userDetailData.channel?userDetailData.channel.name:''}}</el-col></el-col>
                <el-col :span="24" class="paddingbottom">联系电话：{{userDetailData.phone}}</el-col>
                <el-col :span="24" class="paddingbottom">联系地址：{{userDetailData.home_address}}</el-col>
            </el-row>
        </div>
        <div class="borderbottom">
            <h3 class="order-details_h3">账户信息</h3>
            <el-row class="order-details_content">
                <el-col :span="24" class="paddingbottom">账户余额：{{userDetailData.balance}}</el-col>
                <el-col :span="24" class="paddingbottom">账户类别：预充值账户</el-col>
                <el-col :span="24" class="paddingbottom">累计下单：{{userDetailData.order_number}}</el-col>
            </el-row>
        </div>
        <div class="borderbottom">
            <h3 class="order-details_h3">服务设置</h3>
            <el-row class="order-details_content">
                <el-col :span="12" class="paddingbottom">短信通知：  已开通</el-col>
                <!--<el-col :span="12" class="paddingbottom">-->
                    <!--<div style="float: left;">价格策略：</div>-->
                    <!--<ul style="list-style: disc;float: left;padding-left: 20px">-->
                        <!--<li>五环内减免：-10</li>-->
                        <!--<li style="border:none;">五环至六环间减免：-10</li>-->
                    <!--</ul>-->
                <!--</el-col>-->
            </el-row>
        </div>
        <div class="borderbottom" style="border: none;">
            <h3 class="order-details_h3">是否开通推广权限</h3>
            <el-row class="order-details_content">
                <el-col :span="12" class="paddingbottom">权限：  已开通</el-col>
                <el-col :span="12" class="paddingbottom">我的邀请码：{{userDetailData.invite_code}}</el-col>
            </el-row>
        </div>

    </div>

</template>
<script>
   import { Row, Col,} from 'element-ui'
    export default {
        name: 'UserDetails',
        components: {
         [Row.name]: Row,
         [Col.name]: Col
        },
        props: {
            userDetail: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        computed: {
            userDetailData: function (value) {
                return this.userDetail;
            }
        },
        methods: {}
    }
</script>


<style scoped lang="less">
    .user-details_box {
        display: flex;
        flex-direction: column;
        .changeedit{
            cursor: pointer;
        }
        .colorchange{
            color: #009688;
            padding-left: 4px;
        }
        .borderbottom {
            padding: 0 41px;
            border-bottom: 3px dashed #EEEEEE;
        }
        .paddingbottom {
            padding-bottom: 10px;
        }
        .order-details_title {
            margin: 0 auto;
        }
        .order-details_h3 {
            font-size: 18px;
            color: #000;
            margin: 7px 0 11px 0px;
        }
        .order-details_content {
            overflow: hidden;
            font-size: 16px;
        }

    }

</style>

